<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="AR地标详情" :column="2" border>
            <el-descriptions-item label="地标ID">{{oDetail.arLandmarkId}}</el-descriptions-item>
            <el-descriptions-item label="热门指数">
                <el-rate v-model="oDetail.hotStar" disabled show-score></el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="地标名称" :span="2">{{oDetail.name}}</el-descriptions-item>
            <el-descriptions-item label="地标副标题" :span="2">{{oDetail.subtitle}}</el-descriptions-item>
            <el-descriptions-item label="地标定位地址">{{oDetail.locationAddress}}</el-descriptions-item>
            <el-descriptions-item label="地标区域关联">{{oDetail.provinceName}} {{oDetail.cityName}} {{oDetail.districtName}}</el-descriptions-item>
            <el-descriptions-item label="想要">{{oDetail.wishCount}}</el-descriptions-item>
            <el-descriptions-item label="关联U3D城市地标">{{sceneNames.join(',')}}</el-descriptions-item>
            <el-descriptions-item label="商业面积">{{oDetail.commercialArea}}m²</el-descriptions-item>
            <el-descriptions-item label="覆盖人群">{{oDetail.coveragePopulation}}万人</el-descriptions-item>
            <el-descriptions-item label="预估人流量">{{oDetail.visitorsFlowrate}}人/小时</el-descriptions-item>
            <el-descriptions-item label="经济体量" :span="2">{{oDetail.economicVolume}}万亿美元</el-descriptions-item>
            <el-descriptions-item label="月访问量（UV）">{{visits.monthVisit}}</el-descriptions-item>
            <el-descriptions-item label="累计访问量（UV）">{{visits.totalVisit}}</el-descriptions-item>
            <el-descriptions-item label="AR头图" :span="2">
                <div class="imgItemBox">
                    <img :src="oDetail.headImageUrl">
                </div>
            </el-descriptions-item>
            
            <el-descriptions-item label="AR视频" :span="2" v-if="oDetail.videoUrl">
                <video class="myvideo" style="width:500px;height:200px" ref="videoEle" controls>
                    <source :src="oDetail.videoUrl" type="video/mp4">
                    您的浏览器不支持Video标签。
                </video>
            </el-descriptions-item>
            
            <el-descriptions-item label="当前持有人">{{curUser.userName || oDetail.ownerAddress}}</el-descriptions-item>
            <el-descriptions-item label="关联NFT">{{oDetail.nftName}}</el-descriptions-item>
        </el-descriptions>
       
        <div class="el-descriptions__header" style="padding-top:20px">
            <div class="el-descriptions__title">地标的广告位</div>
            <div class="el-descriptions__extra"></div>
        </div>
        <div style="padding:0 0 30px 0 ">
            <ads-list :id='arLandmarkId'/>
        </div>

        <div class="el-descriptions__header" style="padding-top:20px">
            <div class="el-descriptions__title">地标的商铺</div>
            <div class="el-descriptions__extra"></div>
        </div>
        <div style="padding:0 0 30px 0 ">
            <shop-list :id='arLandmarkId'/>
        </div>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="goDetail">修改</el-button>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import adsList from './components/adsList.vue'
import shopList from './components/shopList.vue'
import {
  get_Landmark_details,
  getArSceneList
} from '@/api/arApi'
import {
    get_visit_statistics,
    get_user_info_by_walletAddress
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack,
      adsList,
      shopList
    },
    data(){
        return{
            arLandmarkId:'',
            oDetail:{},
            sceneNames:[],
            visits:{},
            curUser:{}
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.arLandmarkId = this.$route.params.id
        this.getData()
        this.getVisit()
    },
    methods:{
        async getData(){ 
            const res = await get_Landmark_details(this.arLandmarkId)
            if(res.success){
                this.oDetail = res.data
                getArSceneList({u3dMapId:res.data.relationU3dMapId})  // 获取u3d场景数据
                .then(async res2 =>{
                    res2.data.forEach(item => {
                        this.sceneNames.push(item.sceneName)
                    });
                })

                if(res.data.ownerAddress){
                    const res3 = await get_user_info_by_walletAddress(res.data.ownerAddress)
                    this.curUser = res3.data
                }
            }
        },
        getVisit(){
            get_visit_statistics({
                objectId:this.id,
                operateType:1, // 访问量：1-UV,2-PV，趋势图：11-小时，5-天，2-月
                visitTypeCode:5  // 访问的类型1-地图，2-场景，3-店铺，4-物品，5-城市，6-广告位，7-道具，8-DAO，9-NFT
            }).then(res =>{
                this.visits = res.data
            })
        },
        async getUserKeyValue(walletAddress,key){
            if(!walletAddress || !key) return ''
            const res = await get_user_info_by_walletAddress(walletAddress)
            if(res.success){
                return
            }
        },
        goDetail(){
            sessionStorage.setItem('details',JSON.stringify(this.oDetail))
            this.$router.push(`/industry/arlandmark/add?id=${this.oDetail.arLandmarkId}&onlyLook=2`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
    .imgList{
        display: flex;
        padding: 0 0 10px 0;
        img{
            display: block;
            height: 70px;
        }
        p{
            display: flex;
            align-items: center; 
            padding: 0 0 0 20px;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>